<script lang="ts">
export default {
    name: 'App',
};
</script>
<script setup lang="ts">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import en from 'element-plus/dist/locale/en.mjs';
import ja from 'element-plus/dist/locale/ja.mjs';
import { ref, onMounted, watchEffect, watch } from 'vue';
import { getData } from '@/api/mock/index';
import { demoStore } from '@/pinia/demo';
import { getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { Console } from 'console';
import { getQueryObj } from "@/utils/common"
const router = useRouter();
const { proxy } = getCurrentInstance() as any;
const showrotate = ref(false)
const store = demoStore();
const orientation = window.orientation
const locale = ref();
onMounted(() => {
    getData().then(res => {
        console.log('mock请求结果', res);
    });
    setTheme();
    // const orientation = window.orientation
    // if(orientation === 90||orientation === -90){
    //     document.documentElement.style.transform = 'rotate(-90deg)'
    //     document.documentElement.style.width = '100vh'
    //     document.documentElement.style.height = '100vw'
    //     document.documentElement.style.overflow = 'hidden'
    // }
});
// watch(()=>orientation === 90||orientation === -90,()=>{
   
    
//         document.documentElement.style.transform = 'rotate(-90deg)'
//         document.documentElement.style.width = '100vh'
//         document.documentElement.style.height = '100vw'
//         document.documentElement.style.overflow = 'hidden'
        
   
// })
const setTheme = () => {
    const obj = getQueryObj(location.href)
    const theme = obj?.theme;
    const lang = obj?.Lang;
    if (theme == '1') {
        themeColor(whiteTheme);
    } else if (theme == '2') {
        themeColor(blackTheme);
    } else {
        themeColor(whiteTheme);
    }
    if (lang == 'en') {
        proxy.$i18n.locale = 'en';
    } else if (lang == 'zh-HK') {
        proxy.$i18n.locale = 'zhCt';
    } else if (lang == 'zh-CN') {
        proxy.$i18n.locale = 'zhCn';
    }
};
const whiteTheme = {
    '--themedark': '#ffffff',
    '--descrition': '#eeeeee',
    '--labeldescribtion': ' #c4dffe',
    '--titlecolor': '#169497', //myMenu字体颜色
    '--tableheaderback': '#c4dffe', //表格头部背景
    '--tableheadercolor': '#667E97', //表格头部字体
    '--tablecontentcolor': '#666', //表格内容字体
    '--tablecontentback': '#ffffff', //表格内容背景
    '--companyback': '#fff', //公司精选头部背景色
    '--descritioncolor': '#000000',
    '--descritionboder': '#ffffff',
    '--tablestripe': '#fafafa',
    '--tableborder': '#ffffff',
    '--menupopbg': '#ffffff',
    '--arrowColor': '#000000',
    '--menubackgroundcolor':'#ffffff',
    '--loaing':'#ffffff'
};
const blackTheme = {
    '--themedark': '#000000',
    '--descrition': '#262626',
    '--descritionboder': '#000000',
    '--labeldescribtion': '#0a1625',
    '--descritioncolor': '#ffffff',
    '--titlecolor': '#169497', //myMenu字体颜色
    '--tableheaderback': '#09131F', //表格头部背景
    '--tableheadercolor': '#6a6a6a', //表格头部字体
    '--tablecontentcolor': '#6a6a6a', //表格内容字体
    '--tablecontentback': '#27262B', //表格内容背景
    '--companyback': '#0A0E11', //公司精选头部背景色
    '--tablestripe': '#27262b',
    '--tableborder': '#000000',
    '--menupopbg': '#0a131f',
    '--arrowColor': '#ffffff',
    '--menubackgroundcolor':'#000000',
    '--loaing':'#000000'
};

//设置主题色
const themeColor = (theme: any) => {
    Object.keys(theme).forEach((key: any) => {
        document.documentElement.style.setProperty(key, theme[key]);
    });
};
const value = ref('');

// const setFontSize = () => {
//   // 以ipone6手机为例,1rem=1px;   以后就在ipone6手机模拟器开发，把rem当作px用就行了
//   var font = document.documentElement.clientWidth / 375;
//   document.documentElement.style.fontSize = font + "px";
// }
</script>

<style lang="less" scoped>
// .root {
//     width: 100vw;
//     height: 100vh;
//     // background-color: red;
// }
</style>
<template>
    <div class="root dark" :value="locale">
        <el-config-provider :locale="locale">
            <router-view></router-view>
        </el-config-provider>
    </div>
</template>
